<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- transform是css3中颠覆性的特性之一，可以实现元素的移动、缩放、旋转 -->
    <style>
        /* 
            transform可以简单的理解为变形
                translate: 移动
                rotate: 旋转
                scale: 缩放
        */
        div{
            /* 移动盒子的位置的方式：margin、定位、2d转换移动 */
            width: 200px;
            height: 200px; 
            background-color: pink;
            /* 
                translate()方法有两个参数，第一个是在x轴方向上移动的距离，第二个是y轴的(注意别忘了加上px这个单位)。如果取值为百分比时则相对于自身的宽高，不同于我们数学上的坐标轴，这里的坐标轴以左上角为原点，向右为x轴正方向，向下为y轴正方向

                如果只想移动某个方向则把另一个方向设置为0就行了，也可以使用translateX(),translateY()。这两个方法顾名思义，不用我多说吧

                translate()最大的优点就是不会影响到其他元素的位置，不过要注意，translate()对于行内标签是没有效果的
            */
            transform: translate(50%,50%);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>